<template>
	<view class="page">
		<view class="checkphone">
			<view class="t">
				填写新手机号
			</view>
			<view class="c">
				请确保手机号拥有者与实名认证信息匹配。<br>
				当前实名认证信息：<br>
				{{sfz}}
				<text></text>
			</view>
			<view class="b">
				<u--input
				    @focus="focus"
				    placeholder="请输入内容"
				    border="bottom"
				    clearable
					color="#ffffff"
					:value="value2"
				  ></u--input>
			</view>

			<view class="ingo-cell" style="height: 80rpx;">

				<view @click="quit" style="font-weight: 600;  line-height: 80rpx;text-align: center;">
					发送短信验证码
				</view>

			</view>

		</view>
		<u-keyboard   mode="number" dotDisabled="true" :show="show" :tooltip="false" @backspace="backspace" @close="close" :overlay="false" @change="change"></u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: 12345678910,
				sfz: '**罔（身份证： 4********************5）',
				value2:'',
				show:false,
				
			}
		},
		methods: {
			quit() {
				uni.navigateTo({
					url: '../code/code?type=1'
				})
			},
			change(e){
				console.log(e)
				
				this.value2 = this.value2 + e
				
				console.log(this.value2.length)
				if(this.value2.length==6){
					this.finish(this.value2)
					
				}
				
			},
			focus(){
				this.show=true
				
			},
			backspace(){
				
				let s = this.value2.toString()
				
				this.value2 =  s.substring(0,s.length-1)
				
				console.log(this.value2)
			},
		}
	}
</script>

<style scoped>
	>>>.u-border-bottom {
		border-color:#6f6f6f!important;
}
>>>.u-keyboard {
		background-color: #464a48!important;
	}

	>>>.u-keyboard__button-wrapper__button {
		background-color: #252726!important;
	}

	>>>.u-keyboard__button-wrapper__button__text {
		color: #FFFFFF!important;
	}

	>>>.u-icon__icon {
		color: #FFFFFF !important;
	}

	>>>.u-keyboard__button-wrapper {
		box-shadow: none!important;
	}
	.checkphone {
		width: 85%;
		margin: 100rpx auto;

		color: #FFFFFF;


	}

	.t {
		font-size: 48rpx;

	}

	.c {
		margin-top: 40rpx;
		color: #6a706d;
	}

	.b {
		font-size: 48rpx;
		margin-top: 80rpx;
		border-bottom: 1px solid #464a48;
	}

	.d {
		text-align: center;
		margin-top: 600rpx;
	}

	.ingo-cell {
		height: 100rpx;
		color: #252928;
		background-color: #f3e1bd;
		border-radius: 50rpx;
		width: 80%;
		margin: 0px auto;
		margin-top: 100rpx;

	}
</style>
